<template>
  <div>
    <!-- 顶部搜索框 -->
    <van-search
      placeholder="搜索商品, 共119551款好物"
      disabled
      @click="fun()"
    />

    <div class="flex">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="v"
            v-for="(v, index) in obj"
            :key="index"
            @click="fun1(index, v)"
            :class="index == i ? 'h' : 'b'"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <p>
          {{ vv }}
        </p>
        <div class="rr1">
          <div
            v-for="(v, index) in obj1"
            :key="index"
            class="rr"
            @click="fun2(v.proid)"
          >
            <img :src="v.img1" alt="" />
            <p>{{ v.brand }}</p>
          </div>
        </div>
      </div>
    </div>

    <AllCom />
  </div>
</template>

<script>
import life from "./classify/life.vue";
import pets from "./classify/pets.vue";
import recommend from "./classify/recommend.vue";
import clothes from "./classify/clothes.vue";

import axios from "../../request/service.js";
export default {
  components: {
    clothes,
    life,
    pets,
    recommend,
  },
  data() {
    return {
      activeKey: 0,
      obj: [],
      i: 0,
      vv: "显卡",
      obj1: [],
    };
  },
  methods: {
    fun1(index, v) {
      this.i = index;
      this.vv = v;
      this.obj1 = [];
      axios({
        url: "http://118.178.238.19:3001/api/pro/search",
        method: "get",
        params: {
          keyword: this.vv,
          limitNum: 20,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.data) {
          res.data.data.forEach((element) => {
            console.log(element);
            this.obj1.push(element);
          });
        }
        // console.log(this.obj1);
      });
    },
    fun2(v) {
      this.$router.push({
        path: "/details",
        query: { id: v },
      });
      // console.log(v);
    },
    fun() {
      this.$router.push("/search");
    },
  },
  created() {
    axios({
      url: "http://118.178.238.19:3001/api/pro/categorylist",
      method: "get",
    }).then((res) => {
      // console.log(res);
      if (res.data.data) {
        res.data.data.forEach((element) => {
          this.obj.push(element);
        });
      }

      // console.log(this.obj);
    });
  },
  mounted() {
    axios({
      url: "http://118.178.238.19:3001/api/pro/search",
      method: "get",
      params: {
        keyword: this.vv,
        limitNum: 20,
      },
    }).then((res) => {
      console.log(res);
      if (res.data.data) {
        res.data.data.forEach((element) => {
          //console.log(element)
          this.obj1.push(element);
        });
      }

      //console.log(this.obj1)
    });
  },
};
</script>

<style scoped>
::v-deep .van-sidebar-item--select::before {
  background: #fff;
}
.h {
  color: red;
  font-size: 18px;
  font-weight: bold;
}
.b {
  color: black;
}
::v-deep .van-sidebar {
  width: 27vw;
  background: rgb(237, 235, 235);
}
.left {
  width: 27vw;
  height: 178vw;
  overflow: auto;
}
.right {
  width: 70vw;
  background: #fff;
  border-radius: 10px;
  margin-top: 3vw;
  margin-left: 1vw;
  height: 175vw;
  overflow: auto;
}
.rr1 {
  width: 70vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.rr {
  width: 20vw;
  height: 30vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.rr img {
  width: 15vw;
  height: 15vw;
}
.big {
  display: flex;
  background: rgb(237, 235, 235);
}
.flex {
  display: flex;
}
</style>